import * as Matter from 'Matter';
import MatterAttractors from 'MatterAttractors'
let {
  Engine,
  Render,
  Runner,
  Common,
  MouseConstraint,
  Composite,
  Composites,
  Mouse,
  World,
  Events,
  Body,
  Bodies
} = Matter
Matter.use(MatterAttractors);

export default () => {
  // create engine
  var
    world = World.create({
      gravity: {
        y: 0
      }
    }),
    engine = Engine.create({ world })

  // create runner
  var runner = Runner.create();
  // create renderer
  let w = 0
  var render = Render.create({
    element: document.body,
    engine: engine,
    options: {
      width: 1000,
      height: 1000,
      background: '#000',
      wireframes: false,
    }
  }),
    canvas = render.canvas
  canvas.style.position = 'absolute'
  canvas.style.top = canvas.style.left = 0
  canvas.style.width = canvas.style.height = '100%'

  World.add(world, [
    Bodies.rectangle(canvas.width / 2, 0 - 2000 / 2 + w, canvas.width, 2000, {
      isStatic: true,
      render: {
        fillStyle: 'red'
      }
    }),
    Bodies.rectangle(canvas.width / 2, canvas.height + 2000 / 2 - w, canvas.width, 2000, {
      isStatic: true,
      render: {
        fillStyle: 'red'
      }
    }),
    Bodies.rectangle(0 - 2000 / 2 + w, canvas.height / 2, 2000, canvas.height, {
      isStatic: true,
      render: {
        fillStyle: 'red'
      }
    }),
    Bodies.rectangle(canvas.width + 2000 / 2 - w, canvas.height / 2, 2000, canvas.height, {
      isStatic: true,
      render: {
        fillStyle: 'red'
      }
    })
  ])
  var mi = Math.pow(10, 6)

  var attractiveBody0 = Bodies.polygon(
    canvas.width * .5,
    canvas.height * .5,
    1,
    10,
    {
      isStatic: true,
      render: {
        fillStyle: '#000'
      },
      plugin: {
        attractors: [
          (bodyA, bodyB) => {
            return {
              x: (bodyA.position.x - bodyB.position.x) / mi,
              y: (bodyA.position.y - bodyB.position.y) / mi,
            }
          }
        ]
      }
    }
  )
  World.add(world, attractiveBody0);
  var attractiveBody1 = Bodies.polygon(
    canvas.width * 0,
    canvas.height * 0,
    1,
    0,
    {
      isStatic: true,
      render: {
        fillStyle: '#000'
      },
      plugin: {
        attractors: [
          (bodyA, bodyB) => {
            return {
              x: (bodyA.position.x - bodyB.position.x) / mi,
              y: (bodyA.position.y - bodyB.position.y) / mi,
            }
          }
        ]
      }
    }
  )
  World.add(world, attractiveBody1);
  var attractiveBody2 = Bodies.polygon(
    canvas.width,
    canvas.height * 0,
    1,
    0,
    {
      isStatic: true,
      render: {
        fillStyle: '#000'
      },
      plugin: {
        attractors: [
          (bodyA, bodyB) => {
            return {
              x: (bodyA.position.x - bodyB.position.x) / mi,
              y: (bodyA.position.y - bodyB.position.y) / mi,
            }
          }
        ]
      }
    }
  )
  World.add(world, attractiveBody2);
  var attractiveBody3 = Bodies.polygon(
    canvas.width * 0,
    canvas.height,
    1,
    0,
    {
      isStatic: true,
      render: {
        fillStyle: '#000'
      },
      plugin: {
        attractors: [
          (bodyA, bodyB) => {
            return {
              x: (bodyA.position.x - bodyB.position.x) / mi,
              y: (bodyA.position.y - bodyB.position.y) / mi,
            }
          }
        ]
      }
    }
  )
  World.add(world, attractiveBody3);

  var attractiveBody4 = Bodies.polygon(
    canvas.width,
    canvas.height,
    1,
    0,
    {
      isStatic: true,
      render: {
        fillStyle: '#000'
      },
      plugin: {
        attractors: [
          (bodyA, bodyB) => {
            return {
              x: (bodyA.position.x - bodyB.position.x) / mi,
              y: (bodyA.position.y - bodyB.position.y) / mi,
            }
          }
        ]
      }
    }
  )
  World.add(world, attractiveBody4);

  // // add mouse control
  // var mouse = Mouse.create(render.canvas);
  // Events.on(engine, 'afterUpdate', function () {
  //   if (!mouse.position.x) {
  //     return;
  //   }
  //   // smoothly move the attractor body towards the mouse
  //   Body.translate(attractiveBody, {
  //     x: (mouse.position.x - attractiveBody.position.x) * 0.25,
  //     y: (mouse.position.y - attractiveBody.position.y) * 0.25
  //   });
  // });
  // Events.on(engine, 'beforeUpdate', event => {
  //   if (event.timestamp % 1000 < 60) {
  //     Body.setPosition(attractiveBody, {
  //       x: Common.random(5, canvas.width),
  //       y: Common.random(5, canvas.height),
  //     })
  //     Body.setPosition(attractiveBody_, {
  //       x: Common.random(5, canvas.width),
  //       y: Common.random(5, canvas.height),
  //     })


  //   }
  // })

  for (let i = 0; i < 400; i++) {
    var r = Common.random(0, 1) < .9
    var radius = r ? Common.random(3, 5) : Common.random(5, 8)
    var body = Bodies.polygon(
      Common.random(w, canvas.width - w),
      Common.random(w, canvas.height - w),
      Common.random(3, 4),
      radius,
      {
        frictionAir: 0,
        restitution: 1,
        density: radius / 1000
      }
    )
    // Body.setVelocity(body, {
    //   x: 25,
    //   y: 25
    // })
    World.add(world, body)
  }

  Render.run(render)
  Runner.run(runner, engine)

}